import React, { useState } from "react";
import {
  Input,
  InputGroup,
  Stack,
  Button,
  InputLeftElement,
  Checkbox,
  Text,
  Flex,
  Spacer,
} from "@chakra-ui/core";
import { FaUserAlt, FaLock } from "react-icons/fa";

export default function SignIn() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const onSubmit = () => {
    console.log(username, password);
  };

  return (
    <form>
      <Stack spacing="2" mt="30px">
        <InputGroup>
          <InputLeftElement
            pointerEvents="none"
            children={<FaUserAlt color="gray.300" />}
          />
          <Input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="手机号或邮箱"
          />
        </InputGroup>
        <InputGroup>
          <InputLeftElement
            pointerEvents="none"
            children={<FaLock color="gray.300" />}
          />
          <Input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="密码"
          />
        </InputGroup>
        <Flex pt="20px">
          <Checkbox defaultIsChecked>记住我</Checkbox>
          <Spacer />
          <Text as="a">登录遇到问题?</Text>
        </Flex>
        <Stack spacing="20"></Stack>
        <Button
          _hover={{ bgColor: "tomato" }}
          w="100%"
          colorScheme="blue"
          borderRadius="25px"
          onClick={() => onSubmit()}
        >
          登录
        </Button>
      </Stack>
    </form>
  );
}
